<template>
  <baseCard title="应用运行详情"
            :height="height"
            :contentStyle="{ display: 'block' }">
    <div class="content">
      <section class="vpt-body"
               v-for="item in detailsData"
               :key="item.cluster_name">
        <vptItemView :title="item.app_name_zh_cn"
                     :itemTitleStyle="itemTitleStyle">
          <template v-slot:title>
            <img class="vpt-img"
                 src="@/assets/img/theme1/arrow-right.png"
                 alt="" />
            <vptPalnTag :type="
                item.process_status == 3
                  ? 'success'
                  : item.process_status == 2
                  ? 'warn'
                  : 'danger'
              "
                        :text="
                item.process_status == 3
                  ? '正常'
                  : item.process_status == 2
                  ? '提示'
                  : '告警'
              "></vptPalnTag>
          </template>
        </vptItemView>
        <div class="section-content">
          <div class="section-left">
            <vptItemView :title="'容器组(pod)'"
                         :showList="true">
              <div class="item-data">
                <label :style="labelStyle">提示</label>
                <em :style="valueStyle"
                    class="vpt-em-organge">
                  {{ addThousandsSeparator(item.prompt) }}
                </em>
              </div>
              <div class="item-data">
                <label :style="labelStyle">告警</label>
                <em :style="valueStyle"
                    class="vpt-em-red">
                  {{ addThousandsSeparator(item.warning) }}
                </em>
              </div>
            </vptItemView>

            <vptItemView :title="'资源使用情况（使用率）'"
                         :showList="true"
                         :itemStyle="itemStyle">
              <template v-slot:content>
                <vptPieView width="110"
                            height="110"
                            :cpu_usage="item.cpu_usage"
                            :disk_usage="item.disk_usage"
                            :memory_usage="item.memory_usage"
                            :isLandscape="isLandscape"
                            :titleFontSize="titleFontSize"
                            :totalFontSize="totalFontSize"
                            :titleTop="titleTop"></vptPieView>
              </template>
            </vptItemView>
          </div>
          <div class="section-right">
            <vptItemView :title="'响应量'">
              <template v-slot:content>
                <div class="vpt-list">
                  <div class="item-data">
                    <div class="item-data-val">
                      {{ addThousandsSeparator(item.request_time_avg) }}
                      ms
                    </div>
                    <label>平均响应时间</label>
                  </div>
                  <div class="item-data">
                    <div class="item-data-val">
                      {{ addThousandsSeparator(item.request_num_max) }}
                    </div>
                    <label>峰值请求数</label>
                  </div>
                  <div class="item-data">
                    <div class="item-data-val">
                      {{ addThousandsSeparator(item.response_time) }}
                      ms
                    </div>
                    <label>最大/最小响应时间</label>
                  </div>
                </div>
              </template>
            </vptItemView>

            <vptItemView :title="'近30天峰值请求数'"
                         :itemStyle="itemStyle">
              <template v-slot:content>
                <vptReuqestView v-if="
                    item.request_num_max_30days &&
                    item.request_num_max_30days.length > 0
                  "
                                :height="lineHeight"
                                :chartData="item.request_num_max_30days"
                                :isLandscape="isLandscape"
                                :yAxisFontSize="yAxisFontSize" />
                <div class="empty-div"
                     v-else>暂无数据</div>
              </template>
            </vptItemView>
          </div>
        </div>

        <vptItemView :title="'提示/告警问题'"
                     :itemStyle="palnListStyle">
          <template v-slot:content>
            <vptPalnList type="modal"
                         :list="item.prompt_content"
                         :planListStyle="planListStyle"
                         :planItemStyle="planItemStyle"
                         :itemLeftStyle="itemLeftStyle"
                         :messageStyle="messageStyle"
                         @handleClick="handleClick"></vptPalnList>
          </template>
        </vptItemView>
      </section>
    </div>
    <!-- <div class="bottom">
      <div class="title">研发运维情况</div>
      <div class="text">
        <div>
          <label>咨询问题数</label>
          <span
            >{{ addThousandsSeparator(businessData.num_question) }} 万条</span
          >
        </div>
        <div style="margin-left: 0.3rem">
          <label>业务量</label>
          <span
            >{{ addThousandsSeparator(businessData.num_businesss) }} 万条</span
          >
        </div>
      </div>
      <div class="pig-content">
        <VptPie
          :chartData="business"
          autoRander
          v-bind="pieProps"
          titleText="需求总数"
        ></VptPie>
        <VptPie
          :chartData="appIteration"
          autoRander
          v-bind="appPieProps"
          titleText="迭代总数"
        ></VptPie>
        <VptPie
          :chartData="appDefect"
          autoRander
          v-bind="pieProps"
          titleText="缺陷总数"
        ></VptPie>
      </div>
    </div> -->
  </baseCard>
</template>

<script setup>
import { ref, computed } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
import vptPieView from "@/components/modal/vpt-modal-app-run/components/vpt-pie-view.vue";
import vptItemView from "@/components/modal/vpt-modal-app-run/components/vpt-item-view.vue";
import vptReuqestView from "@/components/modal/vpt-modal-app-run/components/vpt-reuqest-view.vue";
import vptPalnTag from "@/components/vpt-base-tag";
import vptPalnList from "@/components/vpt-base-msg-list";
import VptPie from "@/components/echarts/vpt-pie/index.vue";
import { getPercentValue } from "@/utils/formatter.js";

const props = defineProps({
  height: { type: String, default: "" },
  pieData: { type: Array, default: [] },
  businessData: { type: Object, default: {} },
  appRequirementData: { type: Array, default: [] },
  appIterationData: { type: Array, default: [] },
  appDefectData: { type: Array, default: [] },
  detailsData: {
    type: Array,
    default: () => [],
  },
  showModal: {
    type: Boolean,
    default: false,
  },
  detailData: {
    type: Object,
    default: () => ({}),
  },
  isLandscape: { type: Boolean, default: false },
  modalStyle: {
    type: Object,
    default: () => ({
      top: "10%",
      width: "7.5rem",
      maxHeight: "7.5rem",
      padding: "0.24rem",
    }),
  },
  titleStyle: {
    type: Object,
    default: () => ({
      // marginLeft: " 0.1rem",
      fontSize: "0.18rem",
    }),
  },
  modalHeaderStyle: {
    type: Object,
    default: () => ({
      // lineHeight: "0.5rem",
    }),
  },
  closeViewStyle: {
    type: Object,
    default: () => ({
      // marginTop: "0.1rem",
      // paddingRight: "0.2rem",
    }),
  },

  closeStyle: {
    type: Object,
    default: () => ({
      width: "0.24rem",
    }),
  },
  nameStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.16rem",
    }),
  },
  itemStyle: {
    type: Object,
    default: () => ({
      marginBottom: 0,
    }),
  },
  palnListStyle: {
    marginTop: "0.16rem",
  },
  tagStyle: {
    type: Object,
    default: () => ({}),
  },
  labelStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.14rem",
      marginRight: "0.1rem",
    }),
  },
  valueStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.18rem",
    }),
  },
  pieWidth: {
    type: String,
    default: "130",
  },
  pieHeight: {
    type: String,
    default: "130",
  },
  titleFontSize: { type: Number, default: 12 },
  totalFontSize: { type: Number, default: 12 },
  titleTop: { type: String, default: "25" },
  messageStyle: {
    type: Object,
    default: () => ({
      width: "6rem",
      "white-space": "wrap",
      "-webkit-line-clamp": 3,
      "-webkit-box-orient": "vertical",
      display: "-webkit-box",
    }),
  },
  itemLeftStyle: {
    type: Object,
    default: () => ({
      width: "95%",
      "--bef-height": "0.18rem",
    }),
  },
  itemTitleStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.16rem",
    }),
  },
  lineHeight: {
    type: String,
    default: "1.3rem",
  },
  yAxisFontSize: {
    type: Number,
    default: 14,
  },
  planListStyle: {
    type: Object,
    default: () => ({
      height: "auto",
      maxHeight: "4rem",
      marginTop: "0.16rem",
      width: "100%",
      paddingRight: "0.1rem",
    }),
  },
  isLandscape: { type: Boolean, default: false },
});

const pieProps = computed(() => {
  const otherProps = props.isLandscape ? getOtherPieProps() : {};

  return {
    center: ["50%", "35%"],
    radius: ["38%", "50%"],
    legendProps: {
      top: "64%",
      left: "18%",
      itemGap: 10,
    },
    titleProps: {
      left: "52%",
      top: "17%",
    },
    color: ["#EDC600", "#2175DB", "#57C5FF", "#00B675"],
    ...otherProps,
  };
});

const appPieProps = computed(() => {
  const otherProps = props.isLandscape ? getOtherPieProps() : {};

  return {
    center: ["50%", "35%"],
    radius: ["38%", "50%"],
    legendProps: {
      top: "64%",
      left: "18%",
      itemGap: 10,
    },
    titleProps: {
      left: "52%",
      top: "17%",
    },
    color: ["#EDC600", "#2175DB", "#FF7D00", "#00B675"],
    ...otherProps,
  };
});

const business = computed(() => {
  return props.appRequirementData.map((item, index) => {
    return {
      ...item,
      value: item.total_now,
      percent: item.percent + "%",

      // percent: `${getPercentValue(
      //   props.appRequirementData.map((v) => v.value),
      //   index,
      //   1
      // )}%`,
    };
  });
});
const appIteration = computed(() => {
  return props.appIterationData.map((item, index) => {
    return {
      ...item,
      value: item.total_now,
      percent: item.percent + "%",

      // percent: `${getPercentValue(
      //   props.appRequirementData.map((v) => v.value),
      //   index,
      //   1
      // )}%`,
    };
  });
});
const appDefect = computed(() => {
  return props.appDefectData.map((item, index) => {
    return {
      ...item,
      value: item.total_now,
      percent: item.percent + "%",

      // percent: `${getPercentValue(
      //   props.appRequirementData.map((v) => v.value),
      //   index,
      //   1
      // )}%`,
    };
  });
});
</script>

<style lang="less" scoped>
@import url("./index.less");
.content {
  width: 100%;
  height: 100%;
  // height: 5.46rem;
  overflow-y: auto;
  padding-right: 0.08rem;
  .vpt-body {
    margin-top: 0.16rem;
    padding: 0.06rem 0.16rem;
    // font-family: HarmonyOS_Sans_SC;
    background: #1470cc1a;
    border: 0.01rem solid #e6ebf5;
    .vpt-img {
      width: 0.18rem;
    }

    .section-content {
      height: 2.4rem;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .section-left {
        width: 45%;
        padding-right: 0.24rem;
      }

      .section-right {
        flex: 1;
        padding-left: 0.24rem;
        border-left: 2px solid #384d64;
      }
    }
  }
  .vpt-body:first-child {
    margin-top: 0;
  }
}
.bottom {
  margin-top: 0.2rem;
  .title {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 0.2rem;
  }
  .text {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
    div {
      display: flex;
      align-items: center;
      label {
        font-size: 14px;
        color: #ffffffb3;
        margin-right: 0.1rem;
      }
      span {
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
  .pig-content {
    display: flex;
    align-items: center;
    height: 2.5rem;
  }
}
.vpt-em-organge {
  color: #ffc300;
}

.vpt-em-red {
  color: #f53f3f;
}
</style>
